<template>
    <div>
        <el-dialog title="考试出题" style="background: #F0F0F0" :visible.sync="value" top="8vh" width="60%" :show-close="false" center>
            <el-form ref="form" :model="exam">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="classesId" label="考试班级" :rules="[{required:true,message:'请选择班级',trigger:'change'}]">
                            <el-cascader-panel v-model="exam.classesId" :options="computed_classesList" :props="{emitPath:false,value:'id',label:'name',children:'children'}" style="width: 600px"></el-cascader-panel>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="examName" label="试卷名称" :rules="[{required: true,message:'请填写试卷名称',trigger: 'blur'}]">
                            <el-input minlength="2" maxlength="10" show-word-limit type="text" v-model="exam.examName" placeholder="示例: Y201班20191201" style="width: 600px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="examTime" label="考试时间" :rules="[{required: true,message:'请选择考试时间',trigger: 'change'}]">
                            <el-date-picker v-model="exam.examTime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择考试时间" type="datetime" style="width: 600px;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="examTimeLength" label="考试时长" :rules="[{required: true,message:'请填写考试时长',trigger: 'blur'}]">
                            <el-input-number v-model="exam.examTimeLength" :min="40" :max="360" label="请输入考试时长" style="width: 600px;"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="examType" label="试卷类型">
                            <el-radio-group v-model="exam.examType" style="width: 600px;">
                                <el-radio label="1">日测</el-radio>
                                <el-radio label="2">周测</el-radio>
                                <el-radio label="3">月考</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="examPattern" label="试卷模式">
                            <el-radio-group v-model="exam.examPattern" @change="examTypeChange" style="width: 600px;">
                                <el-radio label="1" disabled>手动出题</el-radio>
                                <el-radio label="2">自动出题</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row v-if="exam.examPattern =='2'">
                    <el-col :span="12">
                        <el-form-item label="单选数量">
                            <el-input   v-model="autoExam.singleCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单选分数">
                            <el-input  v-model="autoExam.singleScore" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="exam.examPattern =='2'">
                    <el-col :span="12">
                        <el-form-item label="多选数量">
                            <el-input  v-model="autoExam.selectionCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="多选分数">
                            <el-input  v-model="autoExam.selectionScore" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="exam.examPattern =='2'">
                    <el-col :span="12">
                        <el-form-item label="问答数量">
                            <el-input  v-model="autoExam.askCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="问答分数">
                            <el-input v-model="autoExam.askScore" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="exam.examPattern =='2'">
                    <el-col :span="12">
                        <el-form-item label="上机数量">
                            <el-input  v-model="autoExam.upperCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上机分数">
                            <el-input v-model="autoExam.upperScore" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="exam.examPattern =='1'">
                    <el-col :span="12">
                        <el-form-item label="单选数量">
                            <el-input   v-model="noAutoExam.singleCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单选分数">
                            <el-input  v-model="noAutoExam.singleScore"  :disabled="noAutoExam.singleCount>0 ? false:true" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="exam.examPattern =='1'">
                    <el-col :span="12">
                        <el-form-item label="多选数量">
                            <el-input  v-model="noAutoExam.selectionCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="多选分数">
                            <el-input  v-model="noAutoExam.selectionScore" :disabled="noAutoExam.selectionCount>0 ? false:true" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="exam.examPattern =='1'">
                    <el-col :span="12">
                        <el-form-item label="问答数量">
                            <el-input  v-model="noAutoExam.askCount" disabled style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="问答分数">
                            <el-input v-model="noAutoExam.askScore" :disabled="noAutoExam.askCount>0 ? false:true" style="width:300px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template slot="footer">
                <el-button type="success"  @click="handleSubmit"  v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-plus">提交</el-button>
            </template>

        </el-dialog>

        <exam-auto-child ref="examAutoChild"></exam-auto-child>
        <exam-no-auto-child ref="examNoAutoChild"></exam-no-auto-child>
    </div>
</template>
<script>

    import { getClassesChildrenBySchool } from '@/api/academic/school'

    import { saveExam } from '@/api/academic/exam'

    export default {
        name:'exam-child',
        components:{
            ExamAutoChild:()=>import("@/views/academic/exam-auto-child.vue"),
            ExamNoAutoChild:()=>import("@/views/academic/exam-no-auto-child.vue")
        },
        data(){
            return {
                value : false,
                fullscreenLoading : false,
                classesList:[],//班级数据
                exam:{}, //提交的数据
                autoExam:{},//自动提交数据的合并数据(自动出题)
                noAutoExam:{},//手动提交数据的合并数据(手动出题)

            }
        },
        watch:{
            value(data){
                if(data){
                    //加载班级的数据 cascoder 级联 ---> 学校 --> 阶段 ---> 班级
                    getClassesChildrenBySchool().then(res=>{
                        this.classesList = res.data.data;
                    })
                }
            }
        },
        computed:{
            computed_classesList(){
                let data = this.classesList;

                data.forEach(school=>{
                    if(school && school.children){
                        school.children.forEach(curriculum=>{
                            if(curriculum && curriculum.classesChildren){
                                curriculum.children = curriculum.classesChildren;
                            }
                        })
                    }
                });

                return data;
            }
        },
        methods:{
            examTypeChange(val){ //选择自动出题还是手动出题
                if(val == '1'){ //手动出题

                }else if(val == '2'){ //自动出题
                    this.$refs['examAutoChild'].chapterData = []; //清空章节组
                    this.$refs['examAutoChild'].checkedChapterIdArray = []; //清空选择的章节组
                    this.$refs['examAutoChild'].checkedQuestionTypeArray = []; //清空选择的题型组 1 单选  2 多选 3 问答 4上机
                    this.$refs['examAutoChild'].count = {single:0,selection:0,ask:0}; //清空 题数
                    this.$refs['examAutoChild'].data = {}; //清空提交的数据
                    this.$refs['examAutoChild'].upperList = []; //上机题集合
                    this.$refs['examAutoChild'].temp = null; //清空选择的机试题的章节
                    this.$refs['examAutoChild'].value = true; //打开
                }
            },
            handleSubmit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){

                        //要做什么事情？
                        if(this.exam.examPattern == '1'){ //手动出题
                            this.exam = Object.assign(this.exam,this.noAutoExam);
                        }else if(this.exam.examPattern == '2'){ //自动出题
                            this.exam = Object.assign(this.exam,this.autoExam);
                        }

                        this.fullscreenLoading = true;

                        saveExam(this.exam).then(res=>{
                            this.$message({
                                type:res.data.success ? 'success':'error',
                                message:res.data.message
                            });

                            this.value = false;
                            this.fullscreenLoading = false;
                            this.$parent.getExamList(this.$parent.params);
                        }).catch(e=>{
                            this.$message.error("新增错误,错误原因" + e);
                            this.fullscreenLoading = false;
                        });




                    }else {
                        return false;
                    }
                });
            }
        }
    }


</script>
<style>

</style>